<template>
	<div>
		<h2>ShoInfo: {{ info }}</h2>
		<!-- 子组件不能直接修改父组件中的数据, 应该是谁的数据谁进行修改 -->
		<button @click="info.name = 'kobe'">修改info</button>
		<!-- 正确的做法: 单向数据流 -->
		<button @click="showInfoClick">修改父组件中的数据</button>
		<hr />

		<h2>ShowInfo: {{ roInfo }}</h2>
		<button @click="roInfoBtnClick">修改roInfo</button>
	</div>
</template>

<script>
export default {
	props: {
		info: {
			type: Object,
			default: () => ({}),
		},

		// readonly
		roInfo: {
			type: Object,
			default: () => ({}),
		},
	},
	emits: ['changeInfoName', 'roInfoBtnClick'],
	setup(props, content) {
		function showInfoClick() {
			content.emit('changeInfoName', 'kobe')
		}

		function roInfoBtnClick() {
			content.emit('changeRoInfoName', 'kobe')
		}

		function foo() {
			console.log('abc')
		}

		return {
			showInfoClick,
			roInfoBtnClick,
			foo,
		}
	},
}
</script>

<style scoped></style>
